<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <script src="../G.js"></script>
  <style>
    ul li{ height: 30px; line-height: 30px;}
    #llabel{ color :#999999; font-size:12px; padding-left:15px; };
  </style>
</head>
<body>
<form id="form1" method="post" action="//localhost:8888/test.php">
  <ul>
    <li>姓名：<input type="text" data-tips="" class="tip" name="name" id="tname" value=""/></li>
    <li>密码：<input type="password" name="password1"/></li>
    <li>确认密码：<input type="password" name="password2"/></li>
    <li>性别：<input type="radio" name="sexy" value="0"/>男 <input type="radio" name="sexy" value="1"/>女</li>
    <li>
      <button type="submit" id="bsubmit">提交</button>
      <button type="reset">重置</button>
    </li>
  </ul>
  <script>
    var nameTxt = document.getElementById("tname");
    var labelL = document.getElementById("llabel");
    nameTxt.addEventListener("focus", function (e) {
      if(e.target.value.length == 0){
        labelL.innerHTML = "请输入昵称";
      }
    }, false);
    nameTxt.addEventListener("change",function(e){
      if(e.target.value.length && e.target.value.length <= 10 ){
        labelL.innerHTML = "昵称正确";
      }
      else{
        labelL.innerHTML = "昵称不能超过10个字符";
      }
    },false)

    document.forms[0].addEventListener("submit",function(e){
      window.e =e ;
      var nameText = document.forms[0].elements["name"];
      if(nameText.value.length >10){
        e.preventDefault();
        labelL.innerHTML = "昵称不能超过10个字符";
      }
    },false)
  </script>
</form>
</body>
</html>